<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>画图板</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/head.css" rel="stylesheet" type="text/css">
<link href="css/nav.css" rel="stylesheet" type="text/css">
<link href="css/leftbar.css" rel="stylesheet" type="text/css">
<link href="css/canvas.css" rel="stylesheet" type="text/css">
<link href="css/rightbar.css" rel="stylesheet" type="text/css">
<link href="css/bottom.css" rel="stylesheet" type="text/css"></head>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/paper-full.js"></script>
<script type="text/javascript" src="js/test.js"></script>

<body>
<header >
	<div id="icon"></div>
  <div id="title"><span id="name">画图板-未命名图片1.jpg</span>
    	<span id="close"></span>
        <span id="max"></span>
        <span id="min"></span>
    </div>
    <div id="menuContainer">
   	  <div class="menuButton" id="mFile">文件</div>
        	<div class="menuButton" id="mEdit">编辑</div>
        	<div class="menuButton" id="mImage">图像</div>
        	<div class="menuButton" id="mView">视图</div>
        	<div class="menuButton" id="mText">文本</div>
        	<div class="menuButton" id="mOptions">选项</div>
        	<div class="menuButton" id="mHelp">帮助</div>
    </div>
</header>
<section class="nav">
	<div class="navbar">
    	<div class="navButton" id="openButton">
    	<!-- <input type="file" id="Open" class="hinput"/> -->
    	</div>
    	<div class="navButton" id="saveButton"></div>
        <div class="navButton" id="undoButton"></div>
        <div class="navButton" id="redoButton"></div>
        <div class="seperatorY"></div>
        <div class="lineStyleOption" id="lineStyle" style="display:block;">
        	<div class="introduce">粗细</div>
			<select id="lineStyleOption" name="lineStyle" data-line="1">
  				<option value="1">1px</option>
  				<option value="2">2px</option>
                <option value="4">4px</option>
  				<option value="6">6px</option>
                <option value="8">8px</option>
  				<option value="10">10px</option>
			</select>
            <div class="introduce">填充</div>
            <select id="fillStyle" name="fillStyle" data-fill="0">
            	<option value="0">无</option>
                <option value="1">纯色</option>
            </select>
        </div>
        <div class="zoomInOut" id="zoomInOut" style="display: none;" >
        	<div class="navButton" id="zoomOriginal"></div>
            <div class="navButton" id="zoomIn"></div>
            <div class="navButton" id="zoomOut"></div>
        </div>
        <div class="fontStyleOption" id="fontStyleOption" style="display:none;">
        	<select id="fontFamily"  data-fontFamily="宋体">
            	<option value="宋体">宋体</option>
                <option value="黑体">黑体</option>
                <option value="楷体">楷体</option>
            </select>
            <select id="fontSize" data-fontSize="10">
            	<option value="10">10</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
            </select>
            <div class="seperatorY"></div>
            <div class="fontStyleIcon" id="fontBold"></div>
            <div class="fontStyleIcon" id="fontItalic"></div>
            <div class="fontStyleIcon" id="fontUnderline"></div>
            <div class="fontStyleIcon" id="fontStrikethrough"></div>
            <div class="seperatorY"></div>
            <div id="fontColor"></div>
        </div>
    </div>
    
</section>
<section class="main">
	<div class="leftToolbar">
    	<div class="leftToolbarContainer">
        	<div class="leftbarButton" id="selectButton"></div>
            <div class="leftbarButton" id="cutButton"></div>
            <div class="leftbarButton" id="dropperButton"></div>
            <div class="leftbarButton" id="pencilButton"></div>
            <div class="leftbarButton" id="brushButton"></div>
            <!--<div class="leftbarButton" id="airbrushButton"></div>-->
            <div class="leftbarButton" id="fillButton"></div>
            <div class="leftbarButton" id="eraserButton"></div>
            <div class="leftbarButton" id="textButton"></div>
            <div class="seperateX"></div>
            <div class="leftbarButton" id="magnifierButton"></div>
            <div class="leftbarButton" id="moveButton"></div>
        </div>
    </div>
    <div class="mainarea">
    	<div class="frame">
        	<canvas id="canvas1" class="Canvas" width="800px" height="600px"></canvas>
        </div>
  </div>
   <div id="bottom"></div>
  <div class="rightColorBar">
  	<div class="rightbarContainer">
    	<div class="topColorBox">
        	<div class="swich_icon"></div>
            <div class="switch_row"></div>
            <div class="secondColorBox">
            	<div id="secondColor"></div>
            </div>
            <div class="firstColorBox">
            	<div id="firstColor"></div>
            </div>
        </div>
        <div id="colorCellContainer">
        	<div class="colorCellBorder">
                	<div class="colorCell" id="color1"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color2"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color3"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color4"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color5"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color6"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color7"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color8"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color9"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color10"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color11"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color12"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color13"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color14"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color15"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color16"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color17"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color18"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color19"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color20"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color21"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color22"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color23"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color24"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color25"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color26"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color27"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color28"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color29"></div>
                </div>
                <div class="colorCellBorder">
                	<div class="colorCell" id="color30"></div>
                </div>
            </div>
            <div id="shapeContainer">
            	<div class="shapeButtonBox" id="Line"></div>
                <div class="shapeButtonBox" id="Bezier"></div>
                <div class="shapeButtonBox" id="Triangle"></div>
                <div class="shapeButtonBox" id="RoundRect"></div>
                <div class="shapeButtonBox" id="Rectangle"></div>
                <div class="shapeButtonBox" id="Wujiaoxing"></div>
                <!--<div class="shapeButtonBox" id="Duihuakuang"></div>-->
                <div class="shapeButtonBox" id="Duobianxing"></div>
                <div class="shapeButtonBox" id="Baozha"></div>
                <div class="shapeButtonBox" id="Zhexian"></div>
                 <div class="shapeButtonBox" id="Ellipse"></div>
            </div>
        </div>
    </div>
  </div>
</section>

<div id="svg_source"></div>

<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/try.js"></script>
</body>
</html>
